/* 按钮基本样式 */
.rl-button {
  display: inline-block;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: var(--rl-color-white);
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  /* 左右两边都有.rl-button，则有左外边距 */
  & + & {
    margin-left: 12px;  
  }
  &.is-disabled {
    cursor: not-allowed;
    opacity: 0.7;
  }
  &.is-round {
    border-radius: var(--rl-border-radius-round);
  }
  &.is-circle {
    border-radius: 50%;
    padding: 8px;
  }
  &:hover {
    opacity: 0.7;
  }
}
  /* primary- */
.rl-button.rl-button--primary {
  background-color: var(--rl-color-primary);
}
.rl-button.rl-button--primary.is-plain {
  border: rgb(160, 207, 255);
  color:  rgb(64, 158, 255);
  background-color: rgb(236, 245, 255)
}
.rl-button.rl-button--primary.is-plain:hover {
  background-color: var(--rl-color-primary);
  color: #fff;
}
/* success */
.rl-button.rl-button--success {
  background-color: var(--rl-color-success)
}
.rl-button.rl-button--success.is-plain {
  background-color:rgb(240, 249, 235);
  color: rgb(103, 194, 58);
  border: rgb(179, 225, 157);
}
.rl-button.rl-button--success.is-plain:hover{
  background-color: var(--rl-color-success);
  color: #fff
}

/* danger */
.rl-button.rl-button--danger {
  background-color: var(--rl-color-danger);
}
.rl-button.rl-button--danger.is-plain {
  border: rgb(250, 182, 182);
  background-color: rgb(254, 240, 240);
  color: rgb(245, 108, 108)
}
.rl-button.rl-button--danger.is-plain:hover {
  background-color: var(--rl-color-danger);
  color: #fff
}
/* warning */
.rl-button.rl-button--warning {
  background-color: var(--rl-color-warning);
}
.rl-button.rl-button--warning.is-plain {
  color: rgb(230, 162, 60);
  background-color: rgb(253, 246, 236);
  border: rgb(243, 209, 158)
}
.rl-button.rl-button--warning.is-plain:hover {
  background-color: var(--rl-color-warning);
  color: #fff;
}
/* info */
.rl-button.rl-button--info {
  background-color: var(--rl-color-info);
}
.rl-button.rl-button--info.is-plain {
  background-color: rgb(244, 244, 245);
  border: rgb(200, 201, 204);
  color: rgb(144, 147, 153)
}
.rl-button.rl-button--info.is-plain:hover {
  background-color: var(--rl-color-info);
  color: #fff;
}
.rl-button--medium{
  font-size: 14px;
  padding: 6px 15px;
}

.rl-button--small{
  font-size: 12px;
  padding: 6px 15px;
}

.rl-button--mini{
  font-size: 12px;
  padding: 4px 13px;
}

